<template>
	<page-meta>
		<navigation-bar />
	</page-meta>
	<view>
		<view class="status_bar">
			<!-- 这里是状态栏 -->
			<uni-icons type="left" size="24" style="margin-left: 3vw;" @click="back"></uni-icons>
			<view style="padding-left: 10vw;font-size: 32rpx;font-weight: 700">我的地址</view>
			<view style="margin-right: 3vw;font-size: 26rpx;" @click="gateTo">新增地址</view>
		</view>

	</view>
	<view class="pages">
		<view class="addressList">
			<view class="myAddress" v-for="(item,index) in dataList" :key="index">
				<view style="display: flex;align-items: center;justify-content: center;margin-left: 2vw;">
					<uni-icons type="checkbox-filled" size="30" v-if="item.checkeds" color="#35bdfd"></uni-icons>
					<uni-icons type="checkbox" size="30" v-else @click="change(index)"></uni-icons>
				</view>
				<view class="left">
					<view class="showName">
						{{item.namePer}}
					</view>
					<view class="showPhone">
						{{item.phonePer}}
					</view>
					<view class="showAddress">
						{{item.areaPer}}
					</view>
				</view>
				<view class="right">
					<image @click="goto(item)" style="width: 40rpx;height: 40rpx;margin-right: 20rpx;"
						src="@/static/edit-icon.png" alt="" />
					<uni-icons type="close" size="30" @click="clear(item)"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		updateAreaPerson,
		guard,
		deletePersonArea
	} from "@/ww.js"
	import {
		toast
	} from "@/common.js"
	export default {
		data() {
			return {
				dataList: [], //地址信息List,
				resInfo: ''
			}
		},
		onLoad() {
			guard('../../login/login')
			this.getDataList()
		},
		watch: {
			resInfo: {
				handler(newV) {
					if (newV) {
						this.getDataList()
					}
				}
			}
		},
		methods: {
			goto(e) {
				uni.navigateTo({
					url: './addressEdit?item=' + encodeURIComponent(JSON.stringify(e))
				})
			},
			gateTo() {
				uni.navigateTo({
					url: './addressAdd'
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			getDataList() {
				let query = {
					username: uni.getStorageSync('userInfo').username
				}
				uni.request({
					url: 'http://111.231.22.97:9000/GetAreaTotal',
					method: "GET",
					header: {
						"Authorization": uni.getStorageSync('token').token,
					},
					data: query,
					success: (res) => {
						if (res.data.code == 200) {
							this.dataList = res.data.data
						}
					}
				})
			},
			updateAreaPerson(data) {
				uni.request({
					url: 'http://111.231.22.97:9000/updateAreaPerson',
					method: "POST",
					header: {
						"Authorization": uni.getStorageSync('token').token,
					},
					data: data
				})
			},
			change(e) {
				this.dataList.forEach(i => {
					if (i.checkeds == 1) {
						i.checkeds = 0
						this.updateAreaPerson(i)
					}
				})
				this.dataList[e].checkeds = 1
				this.updateAreaPerson(this.dataList[e])
			},
			clear(e) {
				deletePersonArea({
					workNums: e.workNums
				}).then(res => {
					if (res.code == 200) {
						toast('删除成功')
						this.getDataList()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.addressList {
		width: 100vw;
		overflow: auto;

		.myAddress {
			display: flex;
			width: 80vw;
			margin: 1.5vh auto;
			padding: 3vw 0;
			background: #fff;
			border-radius: 15rpx;
			box-shadow: 0px 5px 10px #888888;

			.left {
				width: 70%;

				.showName,
				.showPhone,
				.showAddress {
					font-size: 28rpx;
					line-height: 32rpx;
					margin-left: 2vw;
				}
			}

			.right {
				width: 30%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.pages {
		width: 100%;
		height: 100vh;
		position: relative;
	}

	.addressAdd {
		width: 100%;
		height: 10vh;
		position: absolute;
		bottom: 0;
		left: 0;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.addressAdd>view {
		display: flex;
		align-items: center;
	}

	.status_bar {
		padding-top: 3vw;
		display: flex;
		justify-content: space-between !important;
		height: 15vw;
		width: 100%;
		background-color: #00bfff;
		line-height: 17vw;
	}
</style>